<f:view xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:aui="http://liferay.com/faces/aui"
	xmlns:c="http://java.sun.com/jsp/jstl/core" 
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:bridge="http://liferay.com/faces/bridge"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<h:head />
	<h:body>
		<h:form id="invoiceListForm">
		    <p:dataTable id="invoiceTable" styleClass="electroOfficeTable"
		    		var="invoice" value="#{invoiceListController.invoices}"
		    		selectionMode="single"
		    		selection="#{invoiceListController.selectedInvoice}"
		            paginator="true" rows="10"
		            rowKey="#{invoice.invoiceNumber}"
		            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
		            rowsPerPageTemplate="5,10,15,25,50"  
		            filteredValue="#{invoiceListController.filteredInvoices}"
		            widgetVar="invoiceListWidget"
		            emptyMessage="Keine Rechnungen gefunden"
		            currentPageReportTemplate="Seite {currentPage} von {totalPages}" >
				
				<p:ajax event="rowSelect" update=":invoiceListForm" />
				
				<f:facet id="headerFacet" name="header" styleClass="headerFacet" >
		        	<p:menubar styleClass="menubar" >
				        <p:submenu label="Datei" icon="ui-icon-document">
				            <p:menuitem value="Rechnungsdetails" 
			        					actionListener="#{invoiceListController.navigateToInvoiceView}"
			        					disabled="#{!invoiceListController.oneInvoiceSelected}"
			        					ajax="false"
										immediate="true" />
							<p:separator />
				        </p:submenu>
				 
				        <f:facet name="options">
				            <p:inputText id="globalFilter" onkeyup="invoiceListWidget.filter()" placeholder="Suche" style="width:150px" />
				        </f:facet>
				    </p:menubar>
		        </f:facet>
		        
	        	<p:column headerText="Projekt-Nr." width="80px"
	        			sortBy="#{invoice.projectNumber}" 
	        			filterBy="#{invoice.projectNumber}"
	        			filterMatchMode="contains" 
	        			id="projectNumber" >
	        		<h:outputText value="#{invoice.projectNumber}" />
		        </p:column>
				<p:column headerText="Bezeichnung" width="150px"
	        			sortBy="#{invoice.projectSubject}" 
	        			filterBy="#{invoice.projectSubject}"
	        			filterMatchMode="contains" 
	        			id="projectSubject" >
	        		<h:outputText value="#{invoice.projectSubject}" />
		        </p:column>
		        <p:column headerText="Kurzbezeichnung" width="150px"
	        			sortBy="#{invoice.shortDescription}" 
	        			filterBy="#{invoice.shortDescription}"
	        			filterMatchMode="contains" 
	        			id="shortDescription" >
	        		<h:outputText value="#{invoice.shortDescription}" />
		        </p:column>
		        <p:column headerText="Rechnungsnummer" 
	        			sortBy="#{invoice.invoiceNumber}" 
	        			filterBy="#{invoice.invoiceNumber}"
	        			filterMatchMode="contains" 
	        			id="invoiceNumber" >
	        		<h:outputText value="#{invoice.invoiceNumber}" />
		        </p:column>
		        <p:column headerText="Rechnungsdatum" 
	        			sortBy="#{invoice.invoiceDate}" 
	        			filterBy="#{invoice.invoiceDate}"
	        			filterMatchMode="contains" 
	        			id="invoiceDate" >
	        		<h:outputText value="#{invoice.invoiceDate}" >
        				<f:converter converterId="LocalDateConverter" />
        			</h:outputText>
		        </p:column>
		    </p:dataTable>
		</h:form>
	</h:body>
</f:view>